<template>
  <PCard class="bpp-con" :isCardBorder="false" :shadow="'never'" :isHeadBottomBorder="true"
    :bodyStyle="{ width: '100%' }">
    <div slot="header" class="bpp-title">
      <span>业务办理进度</span>
    </div>
    <div class="bpp-list">
      <div v-if="showCardList_.spjl" class="bpp-item">
        <auditProcess :extendObj="extendObj" :bizId="auditProcessConfig.flowNo" :flowCode="auditProcessConfig.flowCode">
        </auditProcess>
      </div>
      <div v-if="showCardList_.upload" class="bpp-item">
        <UpLoadFile ref="bpp_uf" :config="upLoadFileconfig"></UpLoadFile>
      </div>
      <div v-if="showCardList_.payForm" class="bpp-item">
        <div style="padding: 20px 10px;">订单待支付：{{ orderAmount }} 元</div>
      </div>
      <div v-if="btnLabel != ''" class="bpp-item">
        <div style="width: 400px; margin: 10px;">
          <a-button type="primary" v-if="showBtn" block @click="btnEvent">{{ btnLabel }}</a-button>
        </div>
      </div>
    </div>
  </PCard>
</template>

<script>
import auditProcess from '@/views/common/auditProcess.vue'
import pageEvent from '../util/pageEventsp'
export default {
  name: 'BusinessProcessingProgress',
  components: { auditProcess },
  props: {
    // 用于控制 审批记录  上传组件  支付组件 的显示隐藏
    showCardList: { type: Object },
    // 用户传递数据
    dataInfo: { type: Object },
    // 数据库查询到数据   此信息中必须包含 订单信息
    dbData: { type: Object },
  },
  data() {
    return {
      extendObj: { bankName: '' },
      auditProcessConfig: {
        flowNo: '',
        flowCode: '',
      },
      orderAmount: '--',
      btnLabel: '',
      showBtn: false,
      showCardList_: {
        spjl: true,
        upload: false,
        payForm: false
      },
      upLoadFileconfig: {
        readonly: false,  // 用于标记是否是可编辑的 此参数可选   默认值 false 表示可编辑   true 表示只读，不可编辑
        dir: '/qsb/idCard/', // 上传文件的地址
        required: true, // 文件上传必填校验 默认为false 不校验   当值为true时进行强制校验
        showCardList: ['card3'],
        upLoadCardListConfig: [
          // { type: '1', tips: '身份证人像面', fileInfo: { name: '', url: '' } },
          // { type: '1', tips: '身份证国徽面', fileInfo: { name: '', url: '' } }
        ], // 此项最多可以传两组值 {type:'1',tips:'身份证人像面',backgroundPic:''},
        fielConfig: {
          type: '', // 允许上传的文件类型 当为空时表示不限制  默认为空   可供选择类型： 图片  文档  压缩包  发票
          size: 10, // 允许上传的文件个数  默认值为1
          singleFileSize: 60, //上传的单个文件大小 单位为 MB  默认值为1
        }
      }
    }
  },
  watch: {
    showCardList: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Object]') {
          // const {uploadData,...args} = val
          this.showCardList_ = Object.assign({}, JSON.parse(JSON.stringify(this.showCardList_)), val)
          this.upLoadFileconfig.upLoadCardListConfig = val.uploadData || []
          this.upLoadFileconfig.readonly = !val.uploadReadonly
          // console.log('showCardList===>',this.showCardList_,val);
        }
      },
      deep: true,
      immediate: true
    },
    dataInfo: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Object]') {
          // val.electronicSignature.orderNo  电子签章的业务
          if (val.data) {
            this.auditProcessConfig.flowNo = val.data.flowNo || ''
            this.auditProcessConfig.flowCode = val.data.flowCode || ''
          }
        }
      },
      deep: true,
      immediate: true
    },
    dbData: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Object]') {
          // val.electronicSignature.orderNo  电子签章的业务
          // val.taxDeclarationEntVo   个税申报业务
          const orderNo = val && val.orderNo || val && val.electronicSignature && val.electronicSignature.orderNo || val && val.taxDeclarationEntVo && val.taxDeclarationEntVo.orderNo || ''
          this.extendObj.bankName = val.bankName
          this.getOrderInfo(orderNo)
        }
      },
      deep: true,
      immediate: true
    },
    showCardList_: {
      handler(val) {
        const { uploadReadonly, upload, payForm } = val
        console.log('########################',uploadReadonly, upload, payForm );



        // 上传组件为只读 不可用
        if (uploadReadonly === true && upload === true) {
          // 需要支付
          if (payForm === true) {
            this.btnLabel = '立即支付'
            this.showBtn = true
          }
          // 不需要支付
          if (payForm === false) {
            this.btnLabel = '提交资料'
            this.showBtn = true
          }
        }
        // 有文件只显示上传组件不需要上传
        if (uploadReadonly === false && upload === true) {
          // 不需要支付
          if (payForm === false) {
            this.btnLabel = ''
            this.showBtn = false
          }
          // 需要支付
          if (payForm === true) {
            this.btnLabel = '立即支付'
            this.showBtn = true
          }
        }
        // 没有需要上传的附件，状态是30 需要支付
        if (uploadReadonly === false && upload === false) {
          // 需要支付
          if (payForm === true) {
            this.btnLabel = '立即支付'
            this.showBtn = true
          }
          // 不需要支付
          if (payForm === false) {
            this.btnLabel = ''
            this.showBtn = false
          }
        }

        // if (val.upload === true && val.payForm === true && val.uploadReadonly == false) {
        //   this.btnLabel = '提交资料并支付'
        //   this.showBtn = true
        // }
        // if (val.upload === true && val.payForm === false && val.uploadReadonly == false) {
        //   this.btnLabel = '提交资料'
        //   this.showBtn = true
        // }
        // if (val.upload === true && val.payForm === true && val.uploadReadonly == true) {
        //   this.btnLabel = '立即支付'
        //   this.showBtn = true
        // }
        // if (val.upload === false && val.payForm === false) {
        //   this.btnLabel = ''
        //   this.showBtn = false
        // }
      },
      deep: true,
      immediate: true
    },
  },
  mounted() {
    this.pageInit()
  },

  methods: {
    pageEvent(type, ...args) {
      return pageEvent(type, this, ...args)
    },
    btnEvent() {
      const btnLabelList = {
        "提交资料并支付": "1",
        "提交资料": "2",
        "立即支付": "3",
        "": "0",
      }

      const typeName = this.dataInfo.name
      this.pageEvent('BusinessProcessingProgressInfo', typeName, btnLabelList[this.btnLabel], this.dataInfo, this.dbData)
    },
    /**
     * 获取订单金额
     */
    getOrderInfo(orderNo) {
      // 缺少查询订单金额的接口
      if (orderNo != '') {
        this.pageEvent('getBePaidAmount', orderNo)
      }
    },
    pageInit() {

    }
  }
}
</script>

<style lang="less">
.bpp-con {
  .bpp-title {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }

  .bpp-list {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;

    .bpp-item {
      width: 100%;
    }
  }
}
</style>
